<template>
    <div>
        <el-container>
            <el-header>

            </el-header>

            <el-divider></el-divider>

            <el-main>
                <el-steps :active="active" finish-status="success">
                    <el-step title="步骤 1">
                        
                    </el-step>
                    <el-step title="步骤 2"></el-step>
                    
                </el-steps>
                <div style="margin: 50px auto; width: 50%" v-if="active==0">
                    <el-form :label-position="labelPosition" label-width="120px" >
                        <el-form-item label="手机号:">
                            <el-input style="width: 300px"></el-input>
                        </el-form-item>
                        
                    </el-form>
                </div>
                    
                <div style="margin: 50px auto; width: 50%" v-if="active==1">
                    <el-form :label-position="labelPosition" label-width="120px" >
                        <el-form-item label="密码:">
                            <el-input style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码:">
                            <el-input style="width: 300px"></el-input>
                        </el-form-item>
                        
                    </el-form>
                </div>
                <div style="margin: 50px auto; width: 50%" v-if="active==2">
                    <el-link 
                    type="success" 
                    icon="el-icon-circle-check"
                    :underline="false"
                    style="font-size: 16px">修改成功</el-link>
                </div>
                <el-button type="danger" plain style="margin-top: 12px;" @click="next">下一步</el-button>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            active: 0,
            labelPosition: 'right',
        }
    },
    methods: {
        next() {
            if (this.active++ > 2) this.active = 0;
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
